<template>
  <div class="box-cards" v-loading="loading">
    <el-card
      class="box-card"
      shadow="hover"
      v-for="(row, i) in data"
      :key="i"
      :class="{
        AbleClick: selection,
        active: selectionArr.filter((v) => v[keyid] === row[keyid]).length > 0,
      }"
      @click.native="handleSelectionChange(row)"
      @mouseleave.native="moreOper(row, true)"
    >
      <ul :style="{ minHeight: operaHeight + 'px' }">
        <li v-for="item in title" :key="item.code">
          <span>{{ item.label }}</span
          ><span :style="getStyle(item, row)"
            ><unit-over
              :content="
                item.format
                  ? item.format(row, item.code)
                  : item.dict && dictionary[item.dict]
                  ? getdictName(
                      typeof row[item.code] == 'string'
                        ? row[item.code].split(',')
                        : row[item.code],
                      dictionary[item.dict]
                    )
                  : ishasValue(row, item.code)
              "
            ></unit-over
          ></span>
        </li>
        <li class="operation">
          <el-button type="text" @click.stop @mouseenter.native="moreOper(row)"
            >更多操作</el-button
          >
        </li>
      </ul>
      <transition name="el-zoom-in-top">
        <div
          class="moreBox"
          v-show="showMore.filter((v) => v[keyid] === row[keyid]).length > 0"
        >
          <div
            v-for="item in operation"
            :key="item.code ? item.code : item"
            v-limit="item.limit"
            v-show="item.show ? item.show(row) : true"
            :disabled="
              (item.show ? item.show(row) : true)
                ? item.disabled
                  ? item.disabled(row)
                  : false
                : true
            "
            @click.stop="btnClick(row, item.code ? item.code : item)"
          >
            <el-button type="text">
              <unit-icon
                class="troila-icon"
                :type="item.code ? item.code : item"
                :disabled="item.disabled ? item.disabled(scope.row) : false"
                color="#fff"
              />{{
                item.label
                  ? item.label
                  : defaultBtn[item.code ? item.code : item]
              }}</el-button
            >
          </div>
        </div>
      </transition>
    </el-card>
    <div class="empty" v-if="!data || data.length == 0">暂无数据</div>
  </div>
</template>

<script>
import unitOver from './over'
export default {
  name: 'unitCards',
  components: { unitOver },
  props: {
    // loading
    loading: {
      type: Boolean,
      default: false,
    },
    // 是否显示多选框
    selection: {
      type: Boolean,
      default: false,
    },
    // row-key唯一主键 为空则非树形
    rowKey: {
      type: String,
      default: null,
    },
    // 表头
    title: {
      type: Array,
      default() {
        return []
      },
    },
    // 表格数据
    data: {
      type: Array,
      default() {
        return []
      },
    },
    // 表格操作
    operation: {
      type: Array,
      default() {
        return []
      },
    },
    // 操作按钮个数
    opera: {
      type: Number,
    },
    // 数据字典
    dictionary: {
      type: Object,
      default() {
        return {}
      },
    },
    page: {
      type: Number,
    },
  },
  data() {
    return {
      defaultBtn: {
        detail: '查看',
        add: '添加',
        edit: '修改',
        delete: '删除',
      },
      pageNum: this.page ? this.page - 1 : 0,
      keyid: this.rowKey ? this.rowKey : 'id',
      selectionArr: [],
      showMore: [],
    }
  },
  computed: {
    operaHeight() {
      return (this.opera ? this.opera : this.operation.length) * 40
    },
    color() {
      return this.$store.state.color
    },
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.pageNum = this.page ? this.page - 1 : 0
        this.selectionArr = []
        this.showMore = []
      },
    },
  },
  methods: {
    getStyle(item, row) {
      if (item.style && typeof item.style == 'object') {
        let style = {}
        for (let k in item.style) {
          item.style[k].result == row[item.code]
            ? (style[k] = item.style[k].value)
            : null
        }
        return style
      }
    },
    moreOper(row, judge) {
      let index = this.showMore.indexOf(row[keyid])
      let keyid = this.keyid,
        showMore = []
      let showMoreId = this.showMore.map((v) => v[keyid])
      if (showMoreId.indexOf(row[keyid]) > -1) {
        showMore = this.showMore.filter((v) => v[keyid] != row[keyid])
      } else if (!judge) {
        showMore = [...this.showMore, row]
      }
      this.showMore = [...showMore]
    },
    btnClick(row, code) {
      // console.log(row, code)
      this.$emit('return', code, { row })
    },
    handleSelectionChange(row) {
      if (!this.selection) {
        return
      }
      let keyid = this.keyid,
        selection = []
      let selectionId = this.selectionArr.map((v) => v[keyid])
      if (selectionId.indexOf(row[keyid]) > -1) {
        selection = this.selectionArr.filter((v) => v[keyid] != row[keyid])
      } else {
        selection = [...this.selectionArr, row]
      }
      this.selectionArr = [...selection]
      // console.log(this.selectionArr)
      this.$emit('return', 'selection', { selection })
    },
    getIndex(index) {
      return (this.pageNum ? Number(this.pageNum) * 10 + index : index) + 1
    },
  },
}
</script>
<style scoped>
.box-cards {
  font-size: 0;
  text-align: left;
  min-height: 200px;
}
.box-card {
  width: calc((100% - 48px) / 5);
  margin: 10px 12px 0 0;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}
.box-card >>> .el-card__body {
  padding: 16px 20px 16px 6px;
}
.box-card:nth-child(5n) {
  margin-right: 0;
}
.box-card li {
  padding: 4px 0;
}
.box-card li::after {
  content: '';
  display: block;
  clear: both;
}
.box-card li > span {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.2;
}
.box-card li > span:first-child {
  width: 90px;
  padding-right: 14px;
  box-sizing: border-box;
  text-align: right;
}
.box-card li > span:last-child {
  width: calc(100% - 90px);
}
.box-card li.operation {
  padding: 0;
  height: 24px;
}
.operation button {
  padding: 4px;
  margin: -4px;
}
.box-card .operation button.el-button--text {
  position: absolute;
  right: 20px;
  bottom: 16px;
}
.box-card::before,
.box-card::after {
  content: '';
  display: block;
  position: absolute;
  opacity: 0;
  transition: opacity 0.1s;
}
.box-card::before {
  border-left: 28px solid transparent;
  border-top: 22px solid;
  right: 0;
  top: 0;
}
.box-card::after {
  width: 12px;
  height: 12px;
  background: url('../../assets/images/icon/active.png') center center/100% 100%
    no-repeat;
  right: 1px;
  top: 1px;
}
.box-card.active::before,
.box-card.active::after {
  opacity: 1;
}
.moreBox {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  flex-flow: column nowrap;
  -moz-justify-content: space-around;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  padding: 14px 0;
  z-index: 1;
}
.moreBox::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.92;
  z-index: 0;
}
.moreBox > div {
  height: 100%;
  width: 100%;
  background-color: transparent;
  transition: background-color 0.15s;
}
.moreBox button {
  color: #fff;
  position: relative;
  font-size: 14px;
  height: 100%;
  width: 100%;
}
.moreBox button svg {
  margin: -3px 6px -3px -10px;
  vertical-align: top;
}
.empty {
  line-height: 200px;
  color: #909399;
  font-size: 14px;
  text-align: center;
}
</style>
